<template>
  <div class="home" style="height: 100%">
    <el-container style="min-height: 100vh">
      <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246);
            box-shadow:2px 0 6px rgb(0 21 0)">
        <Aside :isCollapse="isCollapsed" :logoTextShow="logoTextShow"/>
      </el-aside>

      <el-container>
        <el-header style="height: 30px">
          <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :user="user"/>
        </el-header>
        <el-main>
        <!--  表示当前页面的子路由会在 router-view里面展示        -->
        <router-view @refreshUser="getUser"/>
      </el-main>
        <HelloWorld/>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src

import Aside from "../components/Aside";
import Header from "../components/Header";
import HelloWorld from "../components/HelloWorld";
import ZjhPage from "./zhoujihua/ZjhPagetask";
export default {
  name:'Home',
  components: {ZjhPage, Header, Aside,HelloWorld},
  data() {
    return {

      collapseBtnClass:'el-icon-s-fold',
      isCollapsed:false,
      sideWidth:200,
      logoTextShow:true,
      // user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}
      user:{}


    }
  },
  created() {
    // 页面加载时获取最新的User数据
    this.getUser()
  },
  component: {
    Aside,
    Header
  },

  methods:{
    collapse(){//点击收缩按钮触发
      this.isCollapsed = !this.isCollapsed;
      if(this.isCollapsed){
        this.sideWidth=64;
        this.collapseBtnClass='el-icon-s-unfold';
        this.logoTextShow=false
      }else {
        this.sideWidth=200;
        this.collapseBtnClass='el-icon-s-fold';
        this.logoTextShow=true
      }
    },
    getUser(){
      let username = localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")).username : "";
      // 从后台获取User数据
      this.request.get("/user/username/"+username).then(res=>{
        // 重新赋值
        this.user = res.data
      })
    },
  }

}
</script>
